const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 注意：该插件不兼容webpack5
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const common = require('./webpack.common');
// const webpack = require('webpack');
let { appDist, appSrc, resolveApp, appHtml, appPublic } = require('./paths');
module.exports = merge(common, {
    mode: 'development',
    // 当项目中存在'.browserslistrc'文件时，需要显示设置target，否则会导致热更新失效
    target: 'web',
    // https://webpack.js.org/configuration/devtool/#devtool
    devtool: 'source-map',
    stats: 'errors-only',
    cache: false,
    entry: {
        // reactApp: resolveApp('src/index.jsx'), // react入口
        vueApp: resolveApp('src/main.js'),  // vue入口
    },
    output: {
        filename: 'js/[name].bundle.js',
        chunkFilename: 'js/[name].[contenthash:8].js',
        path: appDist,
        // 资源目录
        assetModuleFilename: 'images/[hash:8][ext][query]',
        clean: true, // clean the output directory
    },
    devServer: {
        historyApiFallback: true,
        // contentBase: [appDist, appPublic], // v3
        static: [appDist, appPublic], // v4
        // noInfo: true,
        // compress: true,
        port: 3000,
        // hot: true, // v4: "hot: true" automatically applies HMR plugin, you don't have to add it manually
        open: false, // 是否打开浏览器
        // webpack-dev-server: v4
        client: {
            // logging: 'error', // overlay: true,
            overlay: {
                warnings: true,
                errors: true
            },
        },
        // webpack-dev-server: v3
        // overlay: {
        //     warnings: true,
        //     errors: true
        // },
        // https://webpack.docschina.org/configuration/dev-server/#devserverstats-
        // https://webpack.docschina.org/configuration/stats/
        // 对于webpack-dev-server，stats需要放到devServer中
        // stats: 'errors-only', // 此选项使可以精确控制显示哪些编译信息 // v3
        // https: false, // 是否启用https
        proxy: {
            '/api': {
                target: 'https://other-server.example.com',
                secure: false,
                pathRewrite: {'^/api': ''},
            }
        },
    },
    module: {
        rules: [
            // 图片资源
            {
                test: /\.(png|svg|jpg|jpeg|gif|cur)$/,
                // https://webpack.docschina.org/guides/asset-modules/
                // https://webpack.docschina.org/configuration/module/#ruletype
                include: [appSrc],
                type: 'asset/resource'
            },
            // 字体
            {
                test: /.(woff|woff2|eot|ttf|otf)$/i,
                include: [appSrc],
                type: 'asset/resource',
            },
            // css,scss样式资源
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    // MiniCssExtractPlugin.loader,
                    'style-loader',// 将 JS 字符串生成为 style 节点
                    // 'css-loader', // 将 CSS 转化成 CommonJS 模块
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true, // 开启sourcemap
                            // modules: true, // 开启 CSS Modules todo???
                        },
                    },
                    // 'sass-loader',// 将 Sass 编译成 CSS
                    {
                        loader: 'sass-loader',
                        options: {sourceMap: true, },
                    }
                ],
            },
            // less
            {
                test: /\.less$/,
                use: [
                    // MiniCssExtractPlugin.loader,
                    'style-loader',// 将 JS 字符串生成为 style 节点
                    'css-loader', // 将 CSS 转化成 CommonJS 模块
                    'less-loader',// 将 Sass 编译成 CSS
                ],
            },
        ]
    },
    plugins: [
        // enable HMR with hot:true
        // but with webpack-dev-server v4: "hot: true" automatically applies HMR plugin, you don't have to add it manually.
        // new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack5脚手架',
            template: appHtml,
            favicon: resolveApp('./public/favicon.ico'),
        }),
        // 与webpack5不兼容
        new FriendlyErrorsWebpackPlugin(),
        // 环境变量：DefinePlugin vs EnvironmentPlugin
        // https://webpack.js.org/plugins/environment-plugin/
        // new webpack.DefinePlugin({
        //     "process.env.debug": true,
        //     "process.env.test": JSON.stringify("test"),
        //     "PRODUCTION": JSON.stringify(true), // bool值
        //     "VERSION": JSON.stringify('v1'), // 字符串
        //     "API_BASE_URL": JSON.stringify('https://api.example.com'),
        //     // 'process.env': {
        //     //     NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        //     // }
        // }),
        // 环境变量EnvironmentPlugin
        // new webpack.EnvironmentPlugin({
        //     test: 'test', // process.env.test
        //     debug: true, // process.env.debug
        // }),
    ],
});